下载安装django，见之前文章

前台页面展示：

一、项目目录结构

 二、主页面settings需要修改地方

1、子页面需要添加到主app

 2、数据库设置

 3、settings底部静态资源配置

三、以device子页面为例

1、device数据库模版

 代码：

class device(models.Model):

device_id =models.CharField(max_length=50) brand =models.CharField(max_length=50) model =models.CharField(max_length=50) version =models.CharField(max_length=50) screen =models.CharField(max_length=50) size =models.CharField(max_length=50) oa_p =models.CharField(max_length=50)

2、url路由配置

testgroup主页面url：

device子页面的url：

3、views接口

from device.models import device

#展示设备管理页面def device_list(request): return render(request, 'device_list.html')

#获取设备列表数据def get_data(request): if requesthod == 'GET': brand = request.GET.get('brand', "") oa_p = request.GET.get('oa_p', "") device_id = request.GET.get('device_id',"") data = [] if brand != '' and oa_p != '' and device_id == '': #根据品牌和oa所属人查询 result = device.objects.filter(brand=brand,oa_p=oa_p) elif brand != '' and oa_p == '' and device_id == '': #根据品牌查询 result = device.objects.filter(brand=brand) elif brand == '' and oa_p != '' and device_id == '': #根据oa所属人查询 result = device.objects.filter(oa_p=oa_p) elif device_id != '' and brand == '' and oa_p == '': #根据设备id查询 result = device.objects.filter(device_id=device_id) elif device_id != '' and brand != '' and oa_p == '': result = device.objects.filter(device_id=device_id,brand=brand) elif device_id != '' and oa_p != '' and brand == '': result = device.objects.filter(device_id=device_id,oa_p=oa_p) elif brand != '' and oa_p != '' and device_id != '': result = device.objects.filter(device_id=device_id,brand=brand,oa_p=oa_p) #根据三项条件交集查询 else: result = device.objects.filter() #无查询条件，返回所有数据

for i in range(len(result)): event = {} event['id'] = result[i].id event['device_id'] = result[i].device_id event['brand'] = result[i].brand event['model'] = result[i].model event['version'] = result[i].version event['screen'] = result[i].screen event['size'] = result[i].size event['oa_p'] = result[i].oa_p data.append(event) count = len(data) if count != 0: return JsonResponse({'code':0,'message':'查询成功','count':count,'data':data}) else: return JsonResponse({'code':0,'message':'暂无数据'})

#新增设备def add_data(request): if requesthod == 'POST': device_id = request.POST.get('device_id', "") brand = request.POST.get('brand', "") model = request.POST.get('model', "") version = request.POST.get('version', "") screen = request.POST.get('screen', "") size = request.POST.get('size', "") oa_p = request.POST.get('oa_p', "") if device_id == '' or brand == '' or model == '' or version == '' or oa_p == '': return JsonResponse({'code': 10021, 'message': '参数错误'}, json_dumps_params={'ensure_ascii': False})

device.objects.create(device_id=device_id, brand=brand, model=model, version=version,screen=screen,size=size,oa_p=oa_p) return JsonResponse({'code': 0, 'message': '添加成功！'})

#编辑设备def edit_data(request): if requesthod == 'POST': id = request.POST.get('id',"") device_id = request.POST.get('device_id', "") brand = request.POST.get('brand', "") model = request.POST.get('model', "") version = request.POST.get('version', "") screen = request.POST.get('screen', "") size = request.POST.get('size', "") oa_p = request.POST.get('oa_p', "") obj = device.objects.filter(id=id)[0] try: obj.device_id = device_id obj.brand = brand obj.model = model obj.version = version obj.screen = screen obj.size = size obj.oa_p = oa_p obj.save() return JsonResponse({'code':0,'message':'修改成功!'}) except objectDoesNotExist: return JsonResponse({'status': 10023, 'message': '数据不存在'})

#删除设备def del_data(request): if requesthod == 'POST': try: device_id = request.POST.get('device_id',"") device_obj = device.objects.filter(device_id=device_id) device_obj.delete() return JsonResponse({'code': 0, 'message': '删除成功','device_id':device_id})

except device.DoesNotExist: return JsonResponse({'code':101,'message':'不存在'})

4、html页面模版（css/html/js）

测试机设备管理

.header span{background: #009688;color: #fff;padding: 10px;margin-left: 30px;line-height: 32px} .header{border-bottom: 2px #009688 solid;} p{ color: black; font-family: "Arial Black"; font-size: 20px; font-weight: bold; text-align: center} h4{ text-align: center; } table,th,td{ border-collapse: collapse;

} button{ background-color: #337ab7; font-size: 14px; color: #fff; font-weight: 400; line-height: 1.42857143; text-align: center; font-family: "Songti TC"; margin: auto;}

.modal .container{ height: 512px; width: 404px; background-color: #fff; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; box-sizing: border-box; border-radius: 6px; padding: 1em;

} input{ border-style: solid; border-width: 1px; border-color: darkgray; margin: 10px 10px 8px; padding: 6px; float: initial; }

#cancel{ margin-left: 10px; margin-right: 40px; width: 30%; background-color: #337ab7; font-weight: bolder; border-color: white; color: white;

} #submit{ width: 30%; background-color: #337ab7; font-weight: bolder; border-color: white; color: white; }

测试机设备管理 新 增

{% csrf_token %} 设备id 品牌 机型 版本 分辨率 尺寸 OA所属人

取消 添加

{% csrf_token %} ID 设备id 品牌 机型 版本 分辨率 尺寸 OA所属人

取消 更新

编辑 删除

layui.use(['layer','table'],function () { var table = layui.table; var form = layui.form; var element = layui.element; var layer = layui.layer; var $ = layui.jquery;

//获取表格数据 table.render({ elem: '#device_list', //赋值表格 url: '/testgroup/device/getdata', //请求地址路由 id:'alltable', height:'full-125', cellMinWidth:20, cols:[[ //表头 {field:'id',title:'ID',Width:10,align:"center"}, {field:'device_id',minWidth:10,title:'设备id',align: "center"}, {field:'brand',title:'品牌',align:"center"}, {field:'model',title:'机型',align:"center"}, {field:'version',minWidth:10,title:'版本',align:"center"}, {field:'screen',minWidth:10,title:'分辨率',align:"center"}, {field:'size',minWidth:10,title:'尺寸',align:"center"}, {field:'oa_p',minWidth:10,title:'OA所有人',align:"center"}, {fixed: 'right', title:'操作', toolbar: '#operation', width:150,align:"center"} ]], page:false,

});

//按条件重新载入table var active = { reload:function () { var brand = $('#rebrand').val(); var oa_p = $('#rerOA').val(); var device_id = $('#device').val(); //执行重载 table.reload('alltable',{ where:{ brand:brand, oa_p:oa_p, device_id:device_id, } });

} };

//点击搜素 执行上面重载table $('.layui-icon-search').on('click',function () { var type = $(this).data('type'); active[type] ? active[type].call(this) : ''; });

//单条新增数据 form.on('submit(adddata)',function () { var formData = new FormData(); formData.append('device_id',$('#device_id').val()); formData.append('brand',$('#brand').val()); formData.append('model',$('#model').val()); formData.append('version',$('#version').val()); formData.append('screen',$('#screen').val()); formData.append('size',$('#size').val()); formData.append('oa_p',$('#oa_p').val());

$.ajax({ type:'POST', //请求方式 url:'/testgroup/device/adddata', //请求接口地址 contentType:false, processData : false, data:formData, //传送数据s success:function (result) { //针对请求结果进行处理 if(result.code === 0){ alert("提交成功"); layer.msg("添加成功！",{time:50000}); window.location.href = '/testgroup/device' }else { layer.msg("添加失败！"); } } }); return false; });

//表格操作列 table.on('tool(table-data)',function (obj) { var data = obj.data; var layEvent = obj.event; var tr = obj.tr; var formData = new FormData(); formData.append('device_id',data.device_id); //删除数据 if (obj.event === 'del'){ layer.confirm('确认删除该条数据？',function (index) { console.log(data.device_id); $.ajax({ type:'POST', url:'/testgroup/device/deldata', contentType:false, processData : false, data:formData, success:function (result) { if (result.code === 0){ layer.msg("删除成功",{icon: 1}); window.location.href = '/testgroup/device' } else { layer.msg("删除失败") } } });

}); //编辑数据 }else if (obj.event === 'edit'){ layer.open({ //打开编辑页弹层 type:1, shade:0.5, shadeClose:true, title:'编辑设备', area: ['500px','600px'], content: $('#edit_data'), success:function () { console.log(data.id); //编辑页弹层显示原始数据 $('#id1').attr("value",data.id); $('#device_id1').attr("value",data.device_id); $('#brand1').attr("value",data.brand); $('#model1').attr("value",data.model); $('#version1').attr("value",data.version); $('#screen1').attr("value",data.screen); $('#size1').attr("value",data.size); $('#oa_p1').attr("value",data.oa_p);

//提交修改后的数据 form.on('submit(updatedata)',function () { var formData1 = new FormData(); formData1.append('id',data.id); formData1.append('device_id',$('#device_id1').val()); formData1.append('brand',$('#brand1').val()); formData1.append('model',$('#model1').val()); formData1.append('version',$('#version1').val()); formData1.append('screen',$('#screen1').val()); formData1.append('size',$('#size1').val()); formData1.append('oa_p',$('#oa_p1').val()); console.log(formData1.device_id); $.ajax({ type:'POST', //请求方式 url:'/testgroup/device/editdata', //请求接口地址 contentType:false, processData : false, data:formData1, //传送数据 success:function (result) { //针对请求结果进行处理 if(result.code === 0){ alert("修改成功"); layer.msg("修改成功！",{time:50000}); window.location.href = '/testgroup/device' }else { layer.msg("修改失败！"); } } }); }); } }); } }); });

//添加设备弹层 $('#add_button').click(function () { layer.open({ type:1, shade:0.5, shadeClose:true, title:'新增设备', area: ['500px','600px'], content: $('#add_data') }); });

django项目创建数据库创建见Django学习网址：